<!doctype html>
<#import "/spring.ftl" as spring />
<#assign security=JspTaglibs["/META-INF/security.tld"] />
<html lang="en">
<head>
<#include "../include/css.ftl">
    <link href="${ctx}/static/plugins/jstree/style.css" rel="stylesheet" type="text/css"/>
    <style>
        .selected {
            background-color: #d1e092 !important;
        }
    </style>
</head>

<body class="adminbody">

<div class="content-page">
    <!-- Start content -->
    <div class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-xl-12">
                    <div class="breadcrumb-holder">
                        <h1 class="main-title float-left">Accounts-Authorization</h1>
                        <ol class="breadcrumb float-right">
                            <li class="breadcrumb-item">Home</li>
                            <li class="breadcrumb-item"><a href="${ctx}/accounts">Accounts</a></li>
                            <li class="breadcrumb-item active">Authorization</li>
                        </ol>
                        <div class="clearfix"></div>
                    </div>
                </div>
            </div>


            <div class="row">
                <div class="col-xl-12">
                    <div class="card mb-3">
                        <div class="card-header">
                            <h3><i class="fa fa-user-o"></i> ${account.username}</h3>
                            <input type="hidden" id="uid" value="${account.uid}">
                            <p>绿色背景表示用户当前拥有的权限。如果勾选中了子节点，那么一定要勾选父节点，否则子节点的权限无效。</p>
                        </div>
                        <div class="card-body">
                            <div id="authTree">
                            </div>

                            <@security.authorize access="hasPermission('','account.authority.edit')">
                            <button class="btn btn-primary" id="saveAuth" onclick="listTreeNode()" disabled="disabled">
                                Save
                            </button>
                            </@security.authorize>
                        </div>
                    </div><!-- end card-->
                </div>
            </div>
        </div>
        <!-- END container-fluid -->
    </div>
    <!-- END content -->
</div>
<!-- END content-page -->

<!-- END main -->
<#include "../include/js.ftl">
<script src="${ctx}/static/plugins/jstree/jstree.min.js"></script>

<script>
    var selectedAuth;//当前页面选择的权限，数据示例：["1","2"]
    var savedSelectedAuth;//已经保存的权限，数据示例：["1","2"]

    $(document).ready(function () {
        var _csrf_token = $("meta[name='_csrf']").attr("content");
        var _csrf_header_name = $("meta[name='_csrf_header']").attr("content");
        $('#authTree').jstree({
            'core': {
                'themes': {
                    'responsive': false
                },
                'data': ${data}
            },
            'types': {
                'default': {
                    'icon': 'fa fa-folder-open'
                },
                'file': {
                    'icon': 'fa fa-file'
                }
            },
            "checkbox": {
                "keep_selected_style": false,
                "three_state": false,
                "cascade": ""//If 'up' is in the string - cascading up is enabled, if 'down' is in the string - cascading down is enabled, if 'undetermined' is in the string - undetermined nodes will be used.If three_state is set to true this setting is automatically set to 'up+down+undetermined'. Defaults to ''.
            },
            'plugins': ["checkbox", 'types']

        }).on('changed.jstree', function (e, data) {
            selectedAuth = data.selected;
            // 事件第1次调用时savedSelectedAuth = undefined，后面changed事件不需要再赋值了。
            if (!savedSelectedAuth) {
                console.log("savedSelectedAuth");
                savedSelectedAuth = data.selected.slice(0);
            }
            var str1 = selectedAuth.sort().toString();
            var str2 = savedSelectedAuth.sort().toString();
            // 如果权限没有变动，保存按钮不能点击，只有权限变化了才能点击保存按钮。
            if (str1 === str2) {
                $("#saveAuth").attr("disabled", "disabled");
            } else {
                $("#saveAuth").removeAttr("disabled");
            }

        });
    });

    function listTreeNode() {
        var uid =$("#uid").val();
        var data={authorityIds:selectedAuth};
        console.log(data);
        var _csrf_token = $("meta[name='_csrf']").attr("content");
        var _csrf_header_name = $("meta[name='_csrf_header']").attr("content");
        $.ajax({
            type: "POST",
            beforeSend: function (request) {
                request.setRequestHeader(_csrf_header_name, _csrf_token);
            },
            url: "${ctx}/accounts/auth/save/"+uid,
            data: data,
            dataType: 'JSON',
            success: function (data, status) {
                if(data.status == 200){
                    toastr.info('保存成功')
                    window.location.reload();
                }else{
                    toastr.error('保存失败')
                }
            },
            error: function (jqXHR, textStatus, errorThrown) {
                if(jqXHR.status == 440 ||jqXHR.status == 403){
                    window.location.assign("${ctx}/");
                }else if (jqXHR.status >= 500) {
                    toastr.error('暂停服务，请耐心等待服务恢复。', '系统通知')
                } else {
                    toastr.error('error code: ' + jqXHR.status, 'Error')
                }
            }
        });
    }

</script>
<!-- END Java Script for this page -->

</body>
</html>